import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Modal,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from 'react-native';
import PropTypes from 'prop-types';
import {LinearBoardButton, LinearButton} from './Button';
import {Colors} from '../styles/common';
const styles = StyleSheet.create({
  modeBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(255,255,255,0.3)',
    paddingLeft: 40,
    paddingRight: 40,
    flexDirection: 'row',
  },
  contentBox: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(255,255,255,0.95)',
    borderRadius: 15,
    padding: 30,
    borderWidth: 2,
    borderColor: Colors.fontPurpleColorLight,
  },
  title: {
    fontSize: 16,
    color: 'black',
    textAlign: 'center',
    marginBottom: 10,
    fontWeight: '500',
  },
  content: {
    fontSize: 14,
    fontWeight: '500',
    color: 'black',
  },
  buttonBox: {
    height: 40,
    width: 260,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    fontSize: 16,
    color: 'blue',
    fontWeight: '500',
  },
});
export default class MyAlert extends Component {
  static propTypes = {
    modalVisible: PropTypes.bool.isRequired,
    title: PropTypes.string,
    content: PropTypes.string.isRequired,
    okPress: PropTypes.func.isRequired,
    okTitle: PropTypes.string,
    cancelPress: PropTypes.func,
    cancelTitle: PropTypes.string,
    bgDismissEnable: PropTypes.bool,
    bgDimiss: PropTypes.func,
  };

  static defaultProps = {
    okTitle: 'Ok',
  };

  constructor(props) {
    super(props);

    console.log('==========');
    console.log(props);
  }

  render() {
    const {
      modalVisible,
      title,
      content,
      okPress,
      okTitle,
      cancelPress,
      cancelTitle,
      bgDismissEnable,
      bgDimiss,
    } = this.props;

    return (
      <Modal
        onStartShouldSetResponder={() => false}
        animationType="fade"
        transparent
        visible={modalVisible}
        onRequestClose={() => {}}
        onShow={() => {}}>
        <TouchableWithoutFeedback
          onPress={() => {
            if (bgDismissEnable) {
              bgDimiss && bgDimiss();
            }
          }}>
          <View style={styles.modeBox}>
            <View style={styles.contentBox}>
              <Text style={styles.content}>{content}</Text>
              <View
                style={{
                  width: '100%',
                  // backgroundColor: 'red',
                  flexDirection: 'row',
                  justifyContent: 'space-around',
                }}>
                {cancelTitle ? (
                  <LinearBoardButton
                    buttonStyle={{width: 100, height: 40}}
                    onPress={cancelPress}
                    text={cancelTitle}></LinearBoardButton>
                ) : null}
                <LinearButton
                  buttonStyle={{width: 100, height: 40}}
                  onPress={okPress}
                  text={okTitle}></LinearButton>
              </View>
            </View>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    );
  }
}
